<template>
  <div :class="$style['advanced-search-container']" ref="container">
    <el-input
      :size="baseSearch.size"
      v-model="baseSearch.value"
      :style="baseSearch.style"
      clearable
      :placeholder="$t(baseSearch.placeholder || '请输入')"
      @clear="search"
      @keyup.enter="search"
    >
      <template #append>
        <el-button :class="$style['search-btn']" size="small" type="primary" @click="search"
          >{{ searchBtnText }}
        </el-button>
      </template>
    </el-input>
    <el-button
      v-if="needAdvanced"
      :class="$style['advanced-btn']"
      size="small"
      type="primary"
      @click.stop="advancedVisible = !advancedVisible"
    >
      {{ advancedBtnText }}
      <i :class="advancedVisible ? 'el-icon-caret-top' : 'el-icon-caret-bottom'"></i>
    </el-button>
    <AscendingOrder
      v-if="ascendingDescending?.length > 0"
      :ascendingDescending="ascendingDescending"
      @advancedChange="advancedChange"
    ></AscendingOrder>
    <transition name="el-zoom-in-top">
      <AdvancedPop
        v-show="advancedVisible"
        @close="advancedVisible = false"
        :advanced-search-inputs="advancedSearchInputs"
        :saveAdvancedForm="saveAdvancedForm"
      ></AdvancedPop>
    </transition>
  </div>
</template>

<script lang="ts">
import AdvancedPop from './components/AdvancedPop.vue'
import { Emit, Model, Options, Prop, Vue } from 'vue-property-decorator'
import { Debounce } from '@/decorators'
import AscendingOrder from './components/ascendingOrder.vue'
import { ObjectType } from 'typings/interfaces'

@Options({
  components: {
    AdvancedPop,
    AscendingOrder,
  },
})
export default class AdvancedSearch extends Vue {
  @Prop(String) readonly containerClass?: string
  @Prop({ type: String, default: 'keyword' }) readonly keyMap!: string
  @Prop(Object) readonly advancedSearchInputs?: Record<string, any>
  @Prop(Array) readonly ascendingDescending?: ObjectType[]
  @Prop({ type: String, default: '查询' }) readonly searchBtnText?: string
  @Prop({ type: String, default: '高级' }) readonly advancedBtnText?: string
  @Prop({ type: Boolean, default: true }) readonly needAdvanced?: boolean
  @Model('baseSearchInput', { type: Object }) public baseSearch!: any

  @Debounce()
  @Emit()
  public search(): any {
    return [
      Object.assign({ [this.keyMap]: this.baseSearch?.value }, this.advancedForm),
      this.advancedOrder,
    ]
  }
  value = ''
  advancedVisible = false
  advancedForm = {}
  advancedOrder = {
    orderBy: 'default',
    orderType: '',
  }
  advancedChange(item: any) {
    this.advancedOrder = item
    this.search()
  }
  // 获取高级选项数据
  saveAdvancedForm(advancedForm: any) {
    this.advancedForm = advancedForm
    this.search()
  }

  mounted(this: any) {
    const that: any = this
    window.addEventListener('click', (e: any): void => {
      if (!that.advancedVisible) return
      if (that.$refs.container && !that.$refs.container.contains(e.target)) {
        that.advancedVisible = false
      }
    })
  }
}
</script>

<style module lang="scss">
.advanced-search-container {
  position: relative;
  display: flex;
  align-items: center;

  .item-container {
    display: inline-block;
  }

  .search-btn {
    background-color: #409eff;
    color: #fff;
  }

  .advanced-btn {
    margin-left: 5px;
  }
}
</style>
